<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <!-- 1. 引入css -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <!-- 
        写网页步骤：
           1. 分析网页
           2. 网页结构html代码
           3. 美化网页css样式
    -->

</head>

<body>
    <div class="g-container">
        <!-- 搜索区域 -->
        <div class="g-search">
            <h2>城市</h2>
            <input type="text" placeholder="请输入搜索内容">
            <h2>登录</h2>
        </div>

        <!-- 中间滚动区域 -->
        <div class="g-wrapper">
            <!-- 轮播区域 -->
            <div class="swiper g-swipper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./image/banner1.png" alt="banner1">
                    </div>
                    <div class="swiper-slide">
                        <img src="./image/banner2.png" alt="banner2">
                    </div>
                    <div class="swiper-slide">
                        <img src="./image/banner3.png" alt="banner3">
                    </div>
                </div>
            </div>
            <!-- 商品分类区域 -->
            <div class="g-category">商品分类</div>
            <!-- 商品列表区域 -->
            <div class="g-goods">商品列表</div>
        </div>

        <!-- 底部tabbar区域 -->
        <div class="g-footer">
            <div class="active">首页</div>
            <div>分类</div>
            <div>购物车</div>
            <div>我的</div>
        </div>

    </div>

    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        new Swiper('swiper', {
            loop: true,
        })
    </script>
</body>

</html>